<template>
	<view class="box">
		<swiper v-if='banner[cur].advert_pic' class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000"
			:duration="1000">
			<swiper-item class="swiper-item" v-for="item in banner[cur].advert_pic" :key="item.id">
				<image :src="item.pic_url" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<scroll-view class="top" scroll-x>
			<text v-for="(item, index) in banner" :key="item.id" :class="index == cur ? 'cur' : ''"
				@click="setCur(index)">{{ item.name }}</text>
		</scroll-view>
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="item.id">
				<text>{{ item.subtitle }}</text>
				<text>{{ item.name }}</text>
				<view class="itemBody">
					<view class="ite" v-for="(ite, inde) in item.list" :key="ite.id" @click="router(index, inde)">
						<view class="img">
							<image :src="ite.cover_pic" mode="aspectFit"></image>
						</view>
						<!-- <app-image borderRadius="16rpx 16rpx 0 0" width="346rpx" height="346rpx" :img-src="ite.cover_pic" mode="mode"></app-image> -->
						<view class="name">{{ ite.name }}</view>
					</view>
				</view>
				<view class="more" @click="navTo(index)">查看更多</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cur: -1,
				banner: [],
				list: []
			};
		},
		methods: {
			setCur(index) {
				this.cur = index;
			},
			router(index, inde) {
				const data = this.list[index].list[inde];
				uni.navigateTo({
					url: data.page_url
				});
			},
			navTo(index) {
				console.log();
				uni.setStorageSync('listItem', JSON.stringify(this.list[index]));
				uni.navigateTo({
					url: '/pages/cats/cats?&cat_id=' + this.list[index].cat_id
				});
			},
			getProduct(id) {
				this.$request({
					url: this.$api.default.cat_list
				}).then(res => {
					if (res.code == 0) {
						let list = []
						let lists = []
						res.data.list.map(item => list.push(...item.child))
						// console.log(list);
						for (let i = 0; i < list.length; i++) {
							for (let j = i + 1; j < list.length; j++) {
								if (list[i].name == list[j].name) {
									list[j].child.push(...list[i].child);
									// console.log(list[i],list[j],1);
									j = ++i;
								}
							}
							lists.push(list[i]);
						}
						// console.log(lists);
						this.banner = lists
						this.cur = 0
					}
				});
			}
		},
		created() {
			let id = uni.getStorageSync('id');
			if (id) return this.getProduct(id), uni.removeStorageSync('id');

			this.getProduct();
		},
		watch: {
			async cur(value) {
				// console.log(value);
				this.list = [];
				let arr = this.banner[this.cur].child;
				// console.log(arr);
				for (let i = 0; i < arr.length; i++) {
					//console.log(arr[i].id);
					let res = await this.$request({
						url: this.$api.default.goods_list + `&cat_id=${arr[i].id}&limit=8`
					});
					// console.log(arr);
					if (res.code == 0) {
						this.list.push({
							name: arr[i].name,
							subtitle: arr[i].subtitle,
							cat_id: arr[i].id,
							list: res.data.list
						});
					}
				}
				console.log(this.list);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.more {
		text-align: center;
		font-size: 0.8em;
		margin-top: 20upx;
		margin-bottom: 80upx;
	}

	.cur {
		color: #000 !important;
		border-bottom: 1px solid !important;
	}

	.box {
		background-color: #fff;

		.swiper {
			width: 100%;
			height: 500upx;

			.swiper-item {
				width: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.top {
			white-space: nowrap;
			width: 750rpx;
			height: 99rpx;
			padding: 0 5rpx;
			flex-wrap: nowrap;
			box-sizing: border-box;

			text {
				display: inline-block;
				height: 97rpx;
				color: #999;
				padding-bottom: 10upx;
				line-height: 97rpx;
				font-size: 26rpx;
				margin: 0 19rpx;
				white-space: nowrap;
				border-bottom: 1rpx solid transparent;
			}
		}

		.list {
			padding: 24rpx 24rpx 0 24rpx;

			.item {
				margin: 30upx 0;

				text {
					display: block;

					line-height: 1.5em;
					text-align: center;
				}

				text:nth-child(1) {
					color: #737373;
					font-family: '黑体';
					letter-spacing: 4px;
					font-size: 24rpx;
				}

				text:nth-child(2) {
					font-size: 28rpx;
					color: #1a1915;
					font-family: '黑体';
					letter-spacing: 2px;
					font-weight: bold;
				}

				.itemBody {
					display: flex;
					margin-top: 20upx;
					justify-content: space-between;

					flex-wrap: wrap;

					.ite {
						border-radius: 16upx;
						overflow: hidden;
						margin: 20upx 0;
						width: 49%;
						background-color: #fff;
						box-shadow: #eee 0 0 6px 4px;

						.img {
							width: 100%;
							position: relative;
							background-color: #f6f6f6;
							padding-bottom: 100%;

							image {
								top: 50%;
								transform: translateY(-50%);
								position: absolute;
								width: 100%;
								max-width: 100%;
								height: 100%;
								height: 100%;
							}
						}

						.name {
							padding: 20upx 20upx;
							color: #000;
							font-size: 0.8em;
						}
					}
				}
			}
		}
	}
</style>